/** @jsxImportSource @emotion/react */
import React, { useState, useCallback } from "react";
import { publicRuntimeConfig } from "../next.config";
import { withRouter } from "next/router";
import Link from "next/link";
import { connect } from "react-redux";
import axios from "axios";

import { logout } from "../store";

import styled from "@emotion/styled";
import { Global } from "@emotion/react";
import { Layout, Input, Avatar, Tooltip, Dropdown, Menu } from "antd";
const { Header, Content, Footer } = Layout;

import { GithubOutlined, UserOutlined } from "@ant-design/icons";
import Container from "../components/Container";

const MyLayout = ({ children, user, logout, router }) => {
  const searchQuery = router.query && router.query.query;
  const [search, setSearch] = useState(searchQuery || "");
  const handelChange = useCallback((e) => {
    setSearch(e.target.value);
  }, []);
  const handelSearch = useCallback(() => {
    router.push(`/search?query=${search}`);
  }, [search]);
  // 登出
  const handleLogout = useCallback(() => logout(), [logout]);

  // const handleWillToAuth = useCallback((e) => {
  //   e.preventDefault();

  //   axios
  //     .get(`/prepare-auth?url=${router.asPath}`)
  //     .then((res) => {
  //       if (res.status === 200) {
  //         location.href = publicRuntimeConfig.OAUTH_URL;
  //       } else {
  //         console.log("prepare auth failed", res);
  //       }
  //     })
  //     .catch((error) => {
  //       console.log("prepare auth failed", error);
  //     });
  // }, []);

  const userDropDown = (
    <Menu>
      <Menu.Item key="1">
        <a href="#!" onClick={handleLogout}>
          登 出
        </a>
      </Menu.Item>
    </Menu>
  );
  return (
    <Layout>
      <Global
        styles={{
          "#__next": {
            height: "100%",
          },
          ".ant-layout": {
            minHeight: "100%",
          },
          ".ant-layout-content": {
            backgroundColor: "#f5f5f5",
          },
        }}
      />
      <LayoutHeader>
        <HeaderLeft>
          <Link href="/">
            <GithubOutlined style={{ fontSize: "45px", color: "white" }} />
          </Link>
          <Input.Search
            placeholder="搜索仓库"
            value={search}
            onChange={handelChange}
            onSearch={handelSearch}
            css={{ marginLeft: "30px" }}
          />
        </HeaderLeft>
        <div className="header-right">
          <div className="user">
            {user && user.id ? (
              <Dropdown overlay={userDropDown}>
                <a href="/">
                  <Avatar size={40} src={user.avatar_url} />
                </a>
              </Dropdown>
            ) : (
              <Tooltip title="点击去登陆">
                <a href={`/prepare-auth?url=${router.asPath}`}>
                  <Avatar size={40} icon={<UserOutlined />} />
                </a>
              </Tooltip>
            )}
          </div>
        </div>
      </LayoutHeader>
      <Content>
        <Container>{children}</Container>
      </Content>
      <LayoutFooter>
        Develop by Zmmmy @ <a href="1611885458@qq.com">1611885458@qq.com</a>
      </LayoutFooter>
    </Layout>
  );
};

export default connect(
  function mapStateToProps(state) {
    return {
      user: state.user,
    };
  },
  function mapDispatchToProps(dispatch) {
    return {
      logout: () => dispatch(logout()),
    };
  }
)(withRouter(MyLayout));

const LayoutHeader = styled(Header)`
  display: flex;
  justify-content: space-between;
  align-content: center;
  text-align: center;
  max-width: 800;
  padding-left: 20;
  padding-right: 20;
`;

const HeaderLeft = styled.div`
  display: flex;
  align-items: center;
`;

const LayoutFooter = styled(Footer)`
  text-align: center;
`;
